<script setup lang="ts">
import { ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/http'
import {useToast} from 'wot-design-uni'
import { useCinemaStore } from '@/store/params'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const cinemaStore = useCinemaStore()
const { success: showSuccess, error: showError } = useToast()

// 定义响应式的导航栏标题
const navTitle = ref('我的订单')
const activeTab = ref(1)
const loading = ref(false)
const tabsList = [
  {
    id: 1,
    name: '商城'
  },
  {
    id: 2,
    name: '电影票'
  }
]

const orderList = ref([])

onLoad((options) => {
  navTitle.value = cinemaStore.cinemaInfo.cinemaName

})

const getOrderData = (status) => {
  loading.value = true
  const params = {
    memberCode: userStore.userInfo.memberCode,
    orderName: '商城',
    orderType: activeTab.value
  }
  http.post('/movieSystem/orders/findOrdersPageList', params).then((res: any) => {
    if (res.success) {
        orderList.value = res.data
    } else {
        showError({
        msg: res.message
        })
    }
  }).finally(() => {
      loading.value = false
  })
    
  if (status === 1) {
    // 即将上映
  } else {
    // 正在上映
  }

}

const onChange = (event) => {
  getOrderData(event.index)
}

const onBuy = (status) => {
  if (status === 1) {
    // 想看
  } else {
    // 购买
    uni.navigateTo({
      url: '/pages-home/ticketPurchaseDetails'
    })

  }
}

const navBack = () => {
  uni.switchTab({
    url: '/pages/thirdTab'
  })
}

</script>

<template>

  <PageLayout :navbarShow="true" navLeftText=""  @navBack="navBack" :navLeftArrow="true" :navTitle="navTitle">
  <view loading>
    <wd-tabs v-model="activeTab" sticky @change="onChange">
      <block v-for="item in tabsList" :key="item.id">
        <wd-tab :title="`${item.name}`" :name="item.name">
          <view v-for="dataItem in orderList" :key="dataItem.id">
            <view>
                <view class="title" v-if="dataItem.status === '1'">请于{{ dataItem.ordersName }}前付款</view>
                <view class="title" v-else>订单完成时间：{{ dataItem.ordersName }}</view>
            </view>
            <view class="flex justify-between">
                <wd-img :width="50" :height="100" :src="dataItem.ordersPic"></wd-img>
                <view>
                <view class="title">{{ dataItem.name }}</view>
                <view class="info">{{ dataItem.director }}</view>
                <view class="info">{{ dataItem.actor }}</view>
                <view class="info">{{ dataItem.schedule }}</view>
                </view>
                <wd-button :disabled="dataItem.status" @click="onBuy(dataItem.status)">{{ dataItem.status === '1' ? '已付款' : dataItem.status === '2'  ? '代付款' : '已取消'}}</wd-button>
            </view>
            </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
  </PageLayout>
</template>

<style></style>

<route type="page" lang="json5">
{
  "style": {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  }
}
</route>
